<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>

<body>
    <div id="app">
        <h4>.camel - 将 kebab-case attribute 名转换为 camelCase。</h4>
        <p :itanyTest=" '网博' ">绑定属性 itanyTest</p>
        <p :itany-test=" '网博' ">绑定属性 itany-test</p>
        <p :itany-test.camel=" '网博' ">绑定属性 itany-test</p>

        <p> .camel 修饰符主要为 svg 标签的 viewBox 属性提供绑定支持 </p>

        <!-- 通过JS代码完成图形绘制 -->
        <!-- <canvas></canvas> -->
        <!-- 通过标签代码完成图形绘制 -->
        <!-- svg的 viewBox 必须是驼峰属性定义 -->
        <svg viewBox="0 0 100 100" width="200px" height="200px" style="border:1px solid black;">
            <!-- 内部不加单位的取值为 栅格单元格大小 -->
            <circle cx="100" cy="100" r="50"></circle>
        </svg>
        <hr>
        <svg :view-box.camel="`0 0 ${x} ${y}`" width="200px" height="200px" style="border:1px solid black;">
            <!-- 内部不加单位的取值为 栅格单元格大小 -->
            <circle cx="100" cy="100" r="50"></circle>
        </svg><br>
        x-{{ x }}<input type="range" min="100" max="200" step="10" @input="x=$event.target.value"><br>
        y-{{ y }}<input type="range" min="100" max="200" step="10" @input="y=$event.target.value">

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    x:100,
                    y:100
                }
            },
            methods: {
              
            }
        }).mount("#app");
    </script>
</body>

</html>